<template>
  <div class="panel">
    <div class="panel-heading">
        <template v-if="post.level === 1">
            <avatar
                v-if="post.avatar"
                size="small"
                :src="post.avatar"
                :vip="post.vipStatus"
                :official="post.official"
                round  
                @click="handleSpace(post)"
            />

            <div class="user-info"  @click="handleSpace(post)">
                <span v-if="post.userName" class="user-name">{{ post.userName }}</span>                            
                <span v-if="post.postTime" class="extra">
                    {{ howLong(post.postTime) }}
                    <span>{{ formatPostAction(post.type) }}</span>
                </span>                                                          
            </div>

            <span v-if="post.isSpaceTop" class="top-btn"><i class="fa fa-dropup"></i> 置顶</span>
            <template v-else>
                <span v-if="post.isFollowed === 0" class="follow-btn"><i class="fa fa-plus"></i> 关注</span> 
                <span v-else class="follow-btn disabled">已关注</span>                           
            </template>
        </template>
        <template v-else>
            <span v-if="post.userName" class="user-name origin" @click="handleSpace(post)">@{{ post.userName }}</span>                
        </template>
    </div>
    <div class="panel-body">
        <post-msg
            v-if="post.msg"
            :id="post.id"
            :msg="post.msg"
            :topics="post.topics || []"
            :emojis="post.emojis || []"
            :ats="post.ats || []"
            :votes="post.votes"
            :lotterys="post.lotterys"
        />
    
        <post-pictures
            v-if="post.pictures"
            :pictures="post.pictures"
        />
        <post-video
            v-if="post.video"
            v-bind="post.video"
        />
        <post-video
            v-if="post.bangumi"
            v-bind="post.bangumi"
            @click="handleBangumi"
        />
        <post-article
            v-if="post.article"
            v-bind="post.article"
        />
        <post-music
            v-if="post.music"
            v-bind="post.music"
        />
        <post-daka
            v-if="post.daka"
            v-bind="post.daka"
        />
        <post-live
            v-if="post.live"
            v-bind="post.live"
        />
        <post-short-video
            v-if="post.shortVideo"
            v-bind="post.shortVideo"
        />
        <template v-if="post.origins">
            <div v-if="post.origins.length === 0 && post.miss === 1" class="missing">
                <i class="fa fa-ban"></i> 原动态失效了
            </div>   
            <space-post-item
                v-else
                :post="post.origins[0]"
            />
        </template>
    </div>            
    <div v-if="post.level === 1" class="panel-footer">
        <div class="col">
            <i class="fa fa-share"></i>{{ formatString(formatNumber(post.repost), '转发') }}
        </div>
        <div class="col">
            <i class="fa fa-comment-o"></i>{{ formatString(formatNumber(post.reply), '评论') }}
        </div>
        <div class="col">
            <i class="fa fa-nice"></i>{{ formatString(formatNumber(post.like), '赞') }}
        </div>  
    </div>                                
</div>
</template>

<script>
import {  } from 'vue'
import { useRouter } from 'vue-router'
import Avatar from '@/components/Avatar'
import PostMsg from './postMsg'
import PostPictures from './postPictures'
import PostVideo from './postVideo'
import PostArticle from './postArticle'
import PostMusic from './postMusic'
import PostDaka from './postDaka'
import PostLive from './postLive'
import PostShortVideo from './postShortVideo'
import { howLong, formatNumber } from '@/utils'
export default {
    name: 'SpacePostItem',
    components: {
        Avatar,
        PostMsg,
        PostPictures,
        PostVideo,
        PostArticle,
        PostMusic,
        PostDaka,
        PostLive,
        PostShortVideo
    },
    props: {
        post: {
            type: Object
        }
    },
    setup(props) {
        const router = useRouter()
        const formatString = (val, str) => {
            if (val === 0) {
                return str
            } else {
                return val
            }
        }
        const formatPostAction = type => {
            let str = ''
            switch (type) {
                case 8:
                    str = ' · 投稿了视频'
                    break
                case 16:
                    str = ' · 投稿了小视频'
                    break
                case 64:
                    str = ' · 投搞了文章'
                    break
                default:
                    str = ''

            }
            return str
        }

        const handleSpace = item => {
            const { type, mid } = item
            const notSpaces = [512, 4099, 4101]
            if (!notSpaces.includes(type)) {            
                router.push({
                    name: 'space',
                    params: {
                        mid
                    }
                })
            }
        }

        const handleBangumi = () => {
            router.push({
                name: 'bangumi',
                params: {
                    id: `ep${props.post.bangumi.episodeId}`
                }
            })
        }

        return {
            formatString,
            handleSpace,
            handleBangumi,
            howLong,
            formatNumber,
            formatPostAction
        }
    }
}
</script>

<style lang="scss">
    .panel {
    border-bottom: 2px solid $color-grey;
    background-color: $color-white;    
    &-heading{
      position: relative;
      display: flex;
      padding: 14px 12px;
      .follow-btn, .top-btn {
        position: absolute;
        right: 0;
        top: 0;
      }
      .follow-btn{
        padding: 10px;
        font-size: 13px;
        color: $theme-color;
        &.disabled{
          color: $color-text-secondary;
        }
      }
      .top-btn {
        top: 4px;
        right: 4px;
        padding: 2px 6px;
        font-size: 12px;
        color: $theme-color;
        background-color: #fff0f1;
        .fa {
          font-size: 12px;
        }
      }
    }
    &-body{
      padding-bottom: 10px;
    }
    .user-info{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 7px;
      .extra {
        color: $color-text-secondary;
        font-size: 12px;
      }
    }
    .user-name {
      color: $color-text-primary;
      font-size: 15px;
      &.origin{
        color: #409EFF;
      }
    }
    &-footer{
      display: flex;
      padding: 0 10px 10px;
      align-items: center;
      .col {
        flex: 1;
        color: $color-text-regular;
        font-size: 13px;
        text-align: center;
        .fa {
          margin-right: 5px;
        }
      }
    }
    .panel {
      border-bottom: 0;
      background-color: $color-grey;
    }
    .missing {
      background-color: $color-grey;
      color: $color-text-secondary;
      font-size: 15px;
      padding: 10px;
    }
}
</style>